<template>
    <div class="nest-pie space-full"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: 'NestPie',
  mounted () {
    this.setEchart()
  },
  methods: {
    setEchart () {
      const myChart = echarts.init(document.querySelector('.nest-pie'))
      const data = [
        { name: '视频设备总数1', value: 40.1 },
        { name: '视频设备总数2', value: 56.1 },
        { name: '视频设备总数3', value: 30.1 },
        { name: '视频设备总数4', value: 44.1 },
        { name: '视频设备总数5', value: 80.1 }
      ]
      const color = ['#9EF869', '#7D3AF7', '#2BFDF6', '#FDC445', '#218FFD']
      const option = {
        backgroundColor: '#000',
        legend: {
          show: true,
          icon: 'circle',
          top: 'center',
          left: '65%',
          data: data.map(item => {
            return item.name
          }),
          orient: 'vertical',
          formatter: (name) => {
            return (
              '{title|' + name + '}\t\t{value|' + data.find((item) => {
                return item.name === name
              }).value + '}'
            )
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 14,
                lineHeight: 20,
                color: 'rgb(0, 178, 246)'
              },
              value: {
                fontSize: 14,
                lineHeight: 20,
                color: '#fff'
              }
            }
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{a}<br>{b}：{c}({d}%)'
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            inside: true,
            textStyle: {
              color: '#fff',
              fontSize: 14
            },
            show: true
          }
        }],
        xAxis: [{
          show: false
        }],
        series: []
      }
      for (let i = 0; i < data.length; i++) {
        option.series.push({
          name: '',
          type: 'pie',
          clockwise: false, // 顺时加载
          hoverAnimation: false, // 鼠标移入变大
          radius: [55 - i * 10 + '%', 50 - i * 10 + '%'],
          center: ['40%', '50%'],
          label: {
            show: false
          },
          itemStyle: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            borderWidth: 5
          },
          data: [{
            value: data[i].value,
            name: data[i].name,
            itemStyle: {
              color: color[i]
            }
          },
          {
            value: 100 - data[i].value,
            name: '',
            itemStyle: {
              color: 'rgba(255,255,255,0.12)'
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }]
        })
      }
      myChart.setOption(option)
    }
  }
}
</script>
